// 决算录入弹窗
<template>
  <div class="addDialog">
    <el-dialog :close-on-click-modal="false" :title="dialogTitle" :visible.sync="dialogVisible" width="1200px" @close="handleDialogClosed">
      <div class="dialogWrap">
        <el-form ref="dialogForm" :rules="rules" :model="formData">
          <el-col :span="24">
            <h4 class="dialogItemTitle">决算信息</h4>
          </el-col>
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="工程名称" prop="engineeringName" class="listFormItem">
                <el-button type="primary" class="add" size="mini" @click="chooseEngineering" v-if="!isReadonly">选择工程</el-button>
                <el-input v-model="formData.engineeringName" readonly />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="物业名称" class="full" prop="propertyName">
                <el-input v-model="formData.propertyName" readonly />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <h4>结算情况</h4>
            </el-col>
            <el-col :span="6">
              <el-form-item label="结算日期" class="full" prop="settlementTm">
                <el-date-picker
                  v-model="formData.settlementTm"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  placeholder="请选择结算日期"
                  :readonly="isReadonly"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="送审金额" class="full" prop="censorshipAmount">
                <el-input v-model="formData.censorshipAmount" maxlength="15" :readonly="isReadonly" placeholder="请输入送审金额" />
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="核减金额" class="full" prop="reductionAmount">
                <el-input v-model="formData.reductionAmount" maxlength="15" :readonly="isReadonly" placeholder="请输入核减金额" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="审定金额" class="full" prop="approvalAmount">
                <el-input v-model="approvalAmountSum" disabled maxlength="15" :readonly="isReadonly" placeholder="请输入审定金额" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <h4>决算情况</h4>
            </el-col>
            <el-col :span="6">
              <el-form-item label="决算日期" class="full" prop="conclusionTm">
                <el-date-picker
                  v-model="formData.conclusionTm"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  placeholder="请选择决算日期"
                  :readonly="isReadonly"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="送审金额" class="full" prop="conclusionAmount">
                <el-input v-model="formData.conclusionAmount" maxlength="15" :readonly="isReadonly" placeholder="请输入送审金额" />
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="核减金额" class="full" prop="clsReductionAmount">
                <el-input v-model="formData.clsReductionAmount" maxlength="15" :readonly="isReadonly" placeholder="请输入核减金额" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="审定金额" class="full" prop="clsAproAmount">
                <el-input v-model="clsAproAmountSum" disabled maxlength="15" :readonly="isReadonly" placeholder="请输入审定金额" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <!-- 工程选择弹窗 -->
        <propertyChooseDialog ref="engineeringChoose" dialogType="final-accounts" @changeProperty="handleEngineeringChange" />
      </div>
      <div slot="footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button v-if="type !== 'preview'" type="primary" v-throttle="[save]" :loading="saveLoading">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import propertyChooseDialog from "@/views/wy-operate/components/propertyChooseDialog";
import { changeConclusion } from "@/views/wy-operate/api/repair.js";
export default {
  name: 'addDepartment',
  components: {
    propertyChooseDialog,
  },
  inject: ['initList'],
  data () {
    return {
      type: 'add',//弹窗类型，默认新增
      //弹窗开关
      dialogVisible: false,
      // 表单项
      formData: {
        //预算ID
        obtId: '',
        //房源ID
        roomId: '',
        //工程名称
        engineeringName: '',
        // 物业名称
        propertyName: '',
        // 结算日期
        settlementTm: '',
        // 送审金额(结算)
        censorshipAmount: '',
        // 审定金额(结算)
        approvalAmount: '',
        // 核减金额(结算)
        reductionAmount: '',
        // 决算日期
        conclusionTm: '',
        // 送审金额(决算)
        conclusionAmount: '',
        // 审定金额(决算)
        clsAproAmount: '',
        // 核减金额(决算)
        clsReductionAmount: '',
      },
      // 校验规则
      rules: {
        engineeringName: [{ required: true, message: "工程名称不能为空", trigger: "blur" }],
        propertyName: [{ required: true, message: "物业名称不能为空", trigger: "blur" }],
        settlementTm: [{ required: true, message: "结算日期不能为空", trigger: "blur" }],
        censorshipAmount: [
          { required: true, message: "送审金额不能为空", trigger: "blur" },
          { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: "请输入正确的金额", trigger: "blur" },
        ],
        approvalAmount: [
          { required: true, message: "审定金额不能为空", trigger: "blur" },
          { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: "请输入正确的金额", trigger: "blur" },
        ],
        conclusionTm: [{ required: true, message: "决算日期不能为空", trigger: "blur" }],
        conclusionAmount: [
          { required: true, message: "送审金额不能为空", trigger: "blur" },
          { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: "请输入正确的金额", trigger: "blur" },
        ],
        clsAproAmount: [
          { required: true, message: "审定金额不能为空", trigger: "blur" },
          { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: "请输入正确的金额", trigger: "blur" },
        ],
        reductionAmount: [
          { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: "请输入正确的金额", trigger: "blur" },
        ],
        clsReductionAmount: [
          { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: "请输入正确的金额", trigger: "blur" },
        ]
      },
      // 保存按钮loading
      saveLoading: false
    }
  },
  computed: {
    // 弹窗标题计算
    dialogTitle () {
      return {
        'preview': '查看',
        'edit': '编辑',
        'add': '新增'
      }[this.type]
    },
    // 判断是否只读
    isReadonly () {
      return ["preview"].includes(this.type);
    },
    clsAproAmountSum () {
      //审核金额-核减金额=审定金额
      if (this.formData.clsReductionAmount == null) {
        this.formData.clsAproAmount = this.formData.conclusionAmount
        return this.formData.clsAproAmount;
      } else {
        this.formData.clsAproAmount = parseFloat(this.formData.conclusionAmount) - parseFloat(this.formData.clsReductionAmount)
        return this.formData.clsAproAmount;
      }
    },
    approvalAmountSum () {
      //审核金额-核减金额=审定金额
      if (this.formData.reductionAmount == null) {
        this.formData.approvalAmount = this.formData.censorshipAmount
        return this.formData.approvalAmount;
      } else {
        this.formData.approvalAmount = parseFloat(this.formData.censorshipAmount) - parseFloat(this.formData.reductionAmount);
        return this.formData.approvalAmount;
      }


    },
  },
  methods: {
    //开启弹窗
    show ({ type, data = {} }) {
      if (['preview', 'edit'].includes(type)) {
        this.formData = data;
      } else {
        this.formData = {}
      }

      this.type = type;
      this.dialogVisible = true;
    },
    // 提交新增
    save () {
      if (['edit', 'add'].includes(this.type)) {
        this.$refs.dialogForm.validate((valid) => {
          if (valid) {
            this.saveLoading = true
            changeConclusion(this.formData, this.type).then(res => {
              if (res.data.code == 0) {
                this.$message.success(`${this.dialogTitle}成功!`);
                this.initList({ current: 1, size: 20, queryConditions: "" });
                this.dialogVisible = false;
              } else {
                this.$message.error(res.data.msg)
              }
            }).finally(() => {
              this.saveLoading = false
            })
          }
        });
      }
    },

    // 选择工程名称
    chooseEngineering () {
      this.$refs.engineeringChoose.show("final-accounts");
    },
    // 监听工程改变
    handleEngineeringChange (data) {
      this.formData = {
        ...this.formData,
        engineeringName: data.engineeringName,
        propertyName: data.propertyName,
        obtId: data.obtId,
        roomId: data.roomId
      };
    },
    // 监听弹窗关闭
    handleDialogClosed () {
      for (var i in this.formData) {
        this.formData[i] = ''
      }
    },


  },
}
</script>

<style lang="scss" scoped>
@import "src/views/wy-operate/css/operate.scss";
.addDialog {
  /deep/ .el-date-editor--datetime {
    width: 100%;
  }
}
</style>
